<template>
  <div class="page-modal">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="modalConfig.title || title"
      destroy-on-close
      width="30%"
      center
    >
      <!-- {{ modalConfig.formItems }} -->
      <hy-form v-bind="modalConfig" v-model="formData" ref="hyFromRef">
        <template #img="scope">
          <hzw-upload
            v-bind="scope.row.otherOptions"
            @upload="upload($event, scope.row.field)"
          ></hzw-upload>
        </template>
      </hy-form>
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick" destroy-on-close
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import HyForm from '@/base-ui/form'
import hzwUpload from '@/lxj-components/hzw-upload'
export default {
  components: {
    HyForm,
    hzwUpload
  },
  props: {
    modalConfig: {
      type: Object,
      required: true
    },
    defaultInfo: {
      type: Object,
      required: true
    },
    otherInfo: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: '新建'
    }
  },
  data() {
    return {
      dialogVisible: false,
      formData: {}
    }
  },
  methods: {
    handleConfirmClick() {
      // 表单验证
      const valid = this.$refs.hyFromRef.submitForm()
      if (!valid) return false

      console.log(this.defaultInfo, this.formData)
      this.$emit('confirmClick', {
        ...this.defaultInfo,
        ...this.formData,
        ...this.otherInfo
      })
    },
    upload(e, type) {
      this.$set(this.formData, type, e)
    }
  },
  watch: {
    defaultInfo(newValue) {
      console.log(newValue, 'watch')
      for (const item of this.modalConfig.formItems) {
        // console.log(item)
        this.$set(this.formData, item.field, newValue[item.field])
        // this.formData[`${item.field}`] = newValue[`${item.field}`]
      }
      // console.log(this.formData)
    },
    dialogVisible(value) {
      this.$nextTick(() => {
        this.$refs.hyFromRef.clearValidate()
      })
      // if (!value) {
      //   //  console.log(this.$refs.hyFromRef, 'SJIJ')
      //   this.$refs.hyFromRef.clearValidate()
      // }
    }
  },
  created() {
    console.log(this.defaultInfo)
  }
}
</script>

<style lang="less" scoped></style>
